<template>
    <div class="tree-header">
        <div class="tree-header-label">
            {{title}}
        </div>
        <div v-show="showBtn" class="tree-header-btn">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="treeBtnClick('add')" class="tree-header-btn-item"></el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="treeBtnClick('edit')" class="tree-header-btn-item"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="treeBtnClick('del')" class="tree-header-btn-item"></el-button>
        </div>
    </div>
</template>
  
<script>

export default {
    props: {
        title:{
            type: String,
            default: '树形'
        },
        showBtn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            
        };
    },

    computed: {
        
    },

    methods: {
        treeBtnClick (type) {
            this.$emit("treeBtnClick", type)
        }
    }
};
</script>

<style lang='less' scoped>
.tree-header{
  height: 28px;
  line-height: 28px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  &-btn{
    display: flex;
    align-items: center;
    &-item{
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      & + .tree-header-btn-item{
        margin-left: 5px;
      }
    }
  }
}
</style>
  
  